@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Poppins;
    background: #161616;
    --speed: 24s;
}
.bg-lighting {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;bottom: 0; margin: auto;
    background: radial-gradient(
        circle at 50% -100%,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0)
        ),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"
        );
    filter: contrast(100%) brightness(200%) invert(100%) grayscale(1) opacity(0.1);
    mix-blend-mode: screen;
    z-index: -1;
}
.bg-lighting::after {
    display: block; content: '';
    width: 100%; height: 100%;
    position: absolute;
    background: linear-gradient( #000 20%, #0003 80%, transparent 100%);
    animation: var(--speed) f-grad linear infinite;
}
@keyframes f-grad {
    0% { height: 100%; }
    50% { height: 50%; }
    100% { height: 100%; }
}

.text-container {
    position: absolute;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: var(--speed) f-rotate linear infinite;
}
.text-container.set1 {
    animation: var(--speed) f-rotate linear infinite reverse;
}
@keyframes f-rotate {
    0% { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); }
    50% { transform: rotateX(42deg) rotateY(0deg) rotateZ(180deg); }
    100% { transform: rotateX(80deg) rotateY(0deg) rotateZ(360deg); }
}
.letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    font-size: calc(var(--fontSize)*1px);
    color: #fff;
    filter: drop-shadow(0 3px 3px #ffffff9a);
}
.letter::after {
    content: attr(data-text);
    position: absolute;
    transform-origin: top;
    top: 100%;
    left: 0;
    transform: scaleY(-1) translateY(calc((var(--shadowHeight)*-1px) + -82%));
    z-index: -1;
    color: #fff;
    filter: blur(calc(var(--refBlur) * 1px));
    opacity: var(--refOpacity);
}

.text-container.set2 .letter {
    transform: rotateX(180deg);
}